<script lang="ts" setup>
import { Question } from "@/types/practice";
import { showDialog, showNotify } from "@nutui/nutui";
import "@nutui/nutui/dist/packages/dialog/style";

const visible = ref(false);

const open = (questionId: Question["id"]) => {
  visible.value = true;
};
defineExpose({
  open,
});

const errorMessage = ref("");
const errorType = ref<string[]>([]);

const handleSubmit = (): void => {
  let isOtherTypesValue = true;
  errorType.value.forEach((item) => {
    if (item == "其他类型") {
      if (errorMessage.value.length == 0) {
        showNotify.warn("选择其他类型需要描述详细错误");
        isOtherTypesValue = false;
      }
    }
  });
  if (errorType.value.length == 0) {
    showNotify.warn("请选择错误类型");
    return;
  } else if (!isOtherTypesValue) {
    return;
  }
  showDialog({
    title: "确认提交",
    onOk: () => {
      console.log(errorType.value);
    },
    popClass: "dialog",
  });
};
</script>

<template>
  <nut-popup position="bottom" style="padding: 1rem 1rem" v-model:visible="visible">
    <div class="flex flex-col gap-3">
      <div class="mb-1 text-xl c-gray-7">题目纠错</div>

      <nut-checkbox-group v-model="errorType" class="flex flex-wrap gap-3">
        <nut-checkbox shape="button" label="错别字"> 错别字 </nut-checkbox>
        <nut-checkbox shape="button" label="题目有误"> 题目有误 </nut-checkbox>
        <nut-checkbox shape="button" label="答案错误"> 答案错误 </nut-checkbox>
        <nut-checkbox shape="button" label="解析错误"> 解析错误 </nut-checkbox>
        <nut-checkbox shape="button" label="图片缺失"> 图片缺失 </nut-checkbox>
        <nut-checkbox shape="button" label="其他类型"> 其他类型 </nut-checkbox>
      </nut-checkbox-group>

      <!-- FIXME: 内边距调整无效 -->
      <nut-textarea class="p-3! b rd-3" v-model="errorMessage" :rows="5" limit-show max-length="100" placeholder="请详细描述错误信息" />

      <div class="w-full flex-wrap">
        <nut-button block @click="handleSubmit" type="primary">提交错误</nut-button>
      </div>
    </div>
  </nut-popup>
</template>
